<template>
	<view class="category">
		<view class="category-header">搜索商品</view>
		<view class="category-main">
			<view class="main-left">
				<view class="left=item active">居家生活</view>
				<view class="left-item">服饰鞋包</view>
				<view class="left-item">美食酒水</view>
				<view class="left-item">居家生活</view>
				<view class="left-item">服饰鞋包</view>
				<view class="left-item">美食酒水</view>
				<view class="left-item">居家生活</view>
				<view class="left-item">服饰鞋包</view>
			</view>
			<view class="main-right">
				<image class="right-img" src="../../static/images/mylove.jpg" mode=""></image>
				<view class="right-list">
					<view class="list-item">
					  <image src="../../static/images/tabBar/tab-cart-current.png" mode=""></image>
					  <text>秋冬好物</text>
					</view>
					<view class="list-item">
					  <image src="../../static/images/tabBar/tab-cart-current.png" mode=""></image>
					  <text>秋冬好物</text>
					</view>
					<view class="list-item">
					  <image src="../../static/images/tabBar/tab-cart-current.png" mode=""></image>
					  <text>秋冬好物</text>
					</view>
					<view class="list-item">
					  <image src="../../static/images/tabBar/tab-cart-current.png" mode=""></image>
					  <text>秋冬好物</text>
					</view>
				</view>
				
			</view>
		</view>
		<view>
</template>

<script>
	export default{
		name:'Category',
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.category
		width:100%
		height:100%
		.category-header
			width:90%
			background-color: #aaa
			font-size:28upx
			text-align: center
			margin:10upx auto
			padding:10upx 0
		.category-main
			display:flex
			border-top: 1upx solid #999
			.main-left
				flex-shrink: 0
				width:20%
				font-size:28upx
				text-align: center
				.left-item
					padding: 20upx 0
				.active
					background-color: yellow
					border-bottom:1upx solid blue
			.main-right
				flex:1
				.right-img
					width:87%
					height:200upx
					padding:20upx 0
					display:block
					margin:0 auto
				.right-list
					display:flex
					flex-wrap: wrap
					.list-item
						text-align: center
						width:33.33%
						image
							width:90%
							height:160upx
		
		
</style>
